<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
<!--    <div class="table-operator">-->
<!--      <a-button type="primary" icon="download" @click="handleExportXls('cou_course_arrange_atom')">导出</a-button>-->
<!--      <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">-->
<!--        <a-button type="primary" icon="import">导入</a-button>-->
<!--      </a-upload>-->
<!--    </div>-->

    <!-- table区域-begin -->
    <div>
      <div style='margin: 0px 5px 10px 5px;'>
        <a-form-model-item label="选择科目" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="subjectId" style='width: 280px;float: left'>
          <a-select v-model="model.subjectId" placeholder="请选择科目"
                    :getPopupContainer="(target) => target.parentNode" @change="handleSubjectChange"  style='width: 200px;'>
            <a-select-option v-for="item in subjectList" :key="item.value">{{ item.label }}</a-select-option>
          </a-select>
        </a-form-model-item>
<!--        <a-form-model-item label="任课教师" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="teacherId"  style='width: 280px;float: left'>-->
<!--          <a-select v-model="model.teacherId" placeholder="请选择教师"-->
<!--                    :getPopupContainer="(target) => target.parentNode"   style='width: 200px;'>-->
<!--            <a-select-option v-for="item in teacherList" :key="item.value">{{ item.label }}</a-select-option>-->
<!--          </a-select>-->
<!--        </a-form-model-item>-->
        <a-form-model-item label="任课教师" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="teacherId"  style='width: 280px;float: left'>
          <j-multi-select-tag :options="teacherList" v-model="model.teacherId" placeholder="请选择教师"   style='width: 200px;'>
          </j-multi-select-tag>
        </a-form-model-item>
        <a-button @click="handleGetData(3)" type="primary" style='margin-left: 10px;'>查看教师课表</a-button>
<!--        <a-button @click="handleGetAllData()" type="primary" style='margin-left: 20px;'>教师详细课表</a-button>-->
        <!-- 调换科目 -->
        <a-button type="primary" @click="handleEditCourseModal" style='margin-left: 20px;'>
          调 课
        </a-button>
        <a-modal v-model="handleEditCourseVisible" title="科目调换" @ok="handleEditCourseOk">
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
        </a-modal>
      </div>
      <div style='width: 82%;text-align: right;color: #d40505'><div style='margin-top: 4px;float: right;width: 20px;height:15px;background-color: #d40505;'> </div> * 红色区表示公共有课部分 </div>
      <div style='float:left;text-align: center;'>
        <div style='width: 100px;float: left;'>
          <div  class='week-t'><span>第几节</span></div>
          <div class='week-c' style='font-weight: bold;background-color: #e2e2e2;' v-for='item in courseData1' :key='item' slot='item'><span>{{ item.courArraAtomSectionname }}</span></div>
        </div>
        <div style='width: 120px;float: left;'>
          <div class='week-t'><span>上课时间</span></div>
          <div class='week-c' v-for='item in courseData1' :key='item' slot='item'><span>{{ item.courArraAtomStartTime }}</span> <span> -- </span><span>{{ item.courArraAtomEndTime }}</span></div>
        </div>
        <div style='width: 150px;float: left;'>
          <div class='week-t'><span>星期一</span></div>
          <div v-for='item in courseData1' :key='item' slot='item' @click='selectBt(item.id,item.relObjId)'>
            <div class='week-c' :style="{'background':item.relObjColor}">
              <div>{{ item.relObjName }}</div>
              <div style='color: #ffffff'> {{ item.teacherCourseClassName }}</div>
              <div >{{ item.teacherCourseSubjectName }}</div>
            </div>
          </div>
        </div>
        <div style='width: 150px;float: left;'>
          <div class='week-t'><span>星期二</span></div>
          <div v-for='item in courseData2' :key='item' slot='item' @click='selectBt(item.id,item.relObjId)'>
            <div class='week-c' :style="{'background':item.relObjColor}">
              <div>{{ item.relObjName }}</div>
              <div style='color: #ffffff'> {{ item.teacherCourseClassName }}</div>
              <div >{{ item.teacherCourseSubjectName }}</div>
            </div>
          </div>
        </div>
        <div style='width: 150px;float: left;'>
          <div class='week-t'><span>星期三</span></div>
          <div v-for='item in courseData3' :key='item' slot='item' @click='selectBt(item.id,item.relObjId)'>
            <div class='week-c' :style="{'background':item.relObjColor}">
              <div>{{ item.relObjName }}</div>
              <div style='color: #ffffff'> {{ item.teacherCourseClassName }}</div>
              <div >{{ item.teacherCourseSubjectName }}</div>
            </div>
          </div>
        </div>
        <div style='width: 150px;float: left;'>
          <div class='week-t'><span>星期四</span></div>
          <div v-for='item in courseData4' :key='item' slot='item' @click='selectBt(item.id,item.relObjId)'>
            <div class='week-c' :style="{'background':item.relObjColor}">
              <div>{{ item.relObjName }}</div>
              <div style='color: #ffffff'> {{ item.teacherCourseClassName }}</div>
              <div >{{ item.teacherCourseSubjectName }}</div>
            </div>
          </div>
        </div>
        <div style='width: 150px;float: left;'>
          <div class='week-t'><span>星期五</span></div>
          <div v-for='item in courseData5' :key='item' slot='item' @click='selectBt(item.id,item.relObjId)'>
            <div class='week-c' :style="{'background':item.relObjColor}">
              <div>{{ item.relObjName }}</div>
              <div style='color: #ffffff'> {{ item.teacherCourseClassName }}</div>
              <div >{{ item.teacherCourseSubjectName }}</div>
            </div>
          </div>
        </div>
        <div style='width: 150px;float: left;'>
          <div class='week-t'><span>星期六</span></div>
          <div v-for='item in courseData6' :key='item' slot='item' @click='selectBt(item.id,item.relObjId)'>
            <div class='week-c' :style="{'background':item.relObjColor}">
              <div>{{ item.relObjName }}</div>
              <div style='color: #ffffff'> {{ item.teacherCourseClassName }}</div>
              <div >{{ item.teacherCourseSubjectName }}</div>
            </div>
          </div>
        </div>
        <div style='width: 150px;float: left;'>
          <div class='week-t'><span>星期天</span></div>
          <div v-for='item in courseData7' :key='item' slot='item' @click='selectBt(item.id,item.relObjId)'>
            <div class='week-c' :style="{'background':item.relObjColor}">
              <div>{{ item.relObjName }}</div>
              <div style='color: #ffffff'> {{ item.teacherCourseClassName }}</div>
              <div >{{ item.teacherCourseSubjectName }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <cou-course-arrange-atom-modal ref="modalForm" @ok="modalFormOk"></cou-course-arrange-atom-modal>
  </a-card>
</template>

<script>

import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { getTeacherCourseDataList } from '@api/couCourseArrangeAtom'
import { getSubjectList, queryTeacherListBySubject } from '@api/commonAPI'
import { httpAction, getAction } from '@/api/manage'
export default {
  name: 'CourseContradictionArrange',
  mixins:[JeecgListMixin, mixinDevice],
  components: {
  },
  data () {
    return {
      description: 'cou_course_arrange_atom管理页面',
      // 表头
      // columns1: [
      //   {
      //     title: '#',
      //     dataIndex: '',
      //     key:'rowIndex',
      //     width:60,
      //     align:"center",
      //     customRender:function (t,r,index) {
      //       return parseInt(index)+1;
      //     }
      //   },
      //   {
      //     title:'上课时间',
      //     align:"center",
      //     width:100,
      //     dataIndex: 'courArraAtomStartTime'
      //   },
      //   {
      //     title:'下课时间',
      //     align:"center",
      //     width:100,
      //     dataIndex: 'courArraAtomEndTime'
      //   },
      //   {
      //     title:'周一',
      //     align:"center",
      //     dataIndex: 'relObjId'
      //   },
      // ],
      // columns2: [
      //   {
      //     title:'周二',
      //     align:"center",
      //     dataIndex: 'relObjId'
      //   },
      // ],
      url: {
        list: "/coursearrangeatom/couCourseArrangeAtom/list",
        delete: "/coursearrangeatom/couCourseArrangeAtom/delete",
        deleteBatch: "/coursearrangeatom/couCourseArrangeAtom/deleteBatch",
        exportXlsUrl: "/coursearrangeatom/couCourseArrangeAtom/exportXls",
        importExcelUrl: "coursearrangeatom/couCourseArrangeAtom/importExcel",

      },
      model: {},
      dictOptions:{},
      superFieldList:[],
      //课表科目查询
      courseData1: [],
      courseData2: [],
      courseData3: [],
      courseData4: [],
      courseData5: [],
      courseData6: [],
      courseData7: [],
      //详细课表  数据初始化
      //下拉数据
      teacherList: [],
      subjectList: [],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      handleEditCourseId: null,
      handleEditCourseRelObjId: null,
      handleEditCourseVisible: false,
    }
  },
  created() {
    this.initList()
    this.getSuperFieldList();
    this.getTeacherLists();
  },
  computed: {
    importExcelUrl: function(){
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
    },
  },
  methods: {
    async initList() {
      let subjectList = await getSubjectList()
      if (subjectList.code === 200) {
        this.subjectList = []
        subjectList.result.forEach(item => {
          this.subjectList.push({
            label: item.subjectName,
            value: item.subjectId
          })
        })
      }
    },

    async handleSubjectChange() {
      let tenantId = ''
      if (localStorage.length > 0) {
        let localData = JSON.parse(localStorage.getItem('pro__Login_Userinfo'))
        tenantId = localData.value.tenantId
        this.model.tenantId = tenantId
      }
      let params = {
        tenantId: tenantId,
        subjectId: this.model.subjectId
      }
      if (this.model.subjectId !== null){
        let res = await queryTeacherListBySubject(params)
        if (res.success) {
          this.teacherList = []
          res.result.forEach(item => {
            this.teacherList.push({
              value: item.teacherId,
              label: item.teacherName
            })
          })
        }
      }
    },
    async getTeacherLists(){
      let getTeacherUrl = "/teacher/teaTeacher/queryTeacherLists"
      getAction(getTeacherUrl).then((res)=>{
        if (res.success) {
          this.teacherList = []
          res.result.forEach(item => {
            this.teacherList.push({
              value: item.id,
              label: item.teacherName
            })
          })
        }
      })
    },

    selectBt(id,relObjId){
      this.handleEditCourseId = id
      this.handleEditCourseRelObjId = relObjId
      // console.log("===数据主键id===" + this.handleEditCourseId + "教师对象id==" + this.handleEditCourseRelObjId)
    },
    handleEditCourseModal(){
      if (this.handleEditCourseId === null){
        alert("请先选择需要调换的科目，点击即可选择！")
      }else {
        this.handleEditCourseVisible = true
      }
    },
    handleEditCourseOk(e) {
      console.log(e);
      this.handleEditCourseVisible = false;
      this.handleEditCourseId = null;
      this.handleEditCourseRelObjId = null;
    },
    initDictConfig(){
    },
    handleGetData(ttype){
      console.log(ttype)
      //初始化
        this.courseData1 = [],
        this.courseData2 = [],
        this.courseData3 = [],
        this.courseData4 = [],
        this.courseData5 = [],
        this.courseData6 = [],
        this.courseData7 = [],
        this.getCourseData(ttype)
    },
    //ttype类型 教师 没有无影响（废除时将前后端都要废除）
    async getCourseData(ttype) {
      let params = {
        relObjId: this.model.teacherId,
        relObjTtype: ttype,
      }
      let res = await getTeacherCourseDataList(params)
      if (res && res.code === 200) {
        console.log(res.result)
        let datas = res.result
        this.courseData1 = datas.filter((item) => {
          return item.courArraAtomWeekday === 1
        })
        this.courseData2 = datas.filter((item) => {
          return item.courArraAtomWeekday === 2
        })
        this.courseData3 = datas.filter((item) => {
          return item.courArraAtomWeekday === 3
        })
        this.courseData4 = datas.filter((item) => {
          return item.courArraAtomWeekday === 4
        })
        this.courseData5 = datas.filter((item) => {
          return item.courArraAtomWeekday === 5
        })
        this.courseData6 = datas.filter((item) => {
          return item.courArraAtomWeekday === 6
        })
        this.courseData7 = datas.filter((item) => {
          return item.courArraAtomWeekday === 7
        })
      } else {
        this.$message.error("暂无数据")
      }
    },
    getSuperFieldList(){
      let fieldList=[];
      fieldList.push({type:'string',value:'courseArrangeId',text:'课表id',dictCode:''})
      fieldList.push({type:'string',value:'targetObjId',text:'目标对象id(班级id(默认)，场地id，老师id，科目id,学生id)，表示该课表应用对象',dictCode:''})
      fieldList.push({type:'string',value:'relObjNameEn',text:'关联对象类型英文名称（班级cou_class、教室fac_classroom、老师tea_teacher、科目cou_subject、学生stu_student）',dictCode:''})
      fieldList.push({type:'string',value:'relObjNameCn',text:'关联对象类型中文名称（班级cou_class、教室fac_classroom、老师tea_teacher、科目cou_subject、学生stu_student）',dictCode:''})
      fieldList.push({type:'int',value:'relObjTtype',text:'关联对象类型(1:班级;2:教室,3.老师;4.科目5学生)',dictCode:''})
      fieldList.push({type:'string',value:'relObjId',text:'关联对象id',dictCode:''})
      fieldList.push({type:'int',value:'courArraAtomWeekday',text:'星期数',dictCode:''})
      fieldList.push({type:'int',value:'courArraAtomSection',text:'节次',dictCode:''})
      fieldList.push({type:'string',value:'courArraAtomSectionname',text:'节次名称',dictCode:''})
      fieldList.push({type:'int',value:'courArraAtomIzSingle',text:'单双周标识(1单周（默认），2双周 3三周 4四周)',dictCode:''})
      fieldList.push({type:'string',value:'courArraAtomStartTime',text:'开始时间',dictCode:''})
      fieldList.push({type:'string',value:'courArraAtomEndTime',text:'结束时间',dictCode:''})
      fieldList.push({type:'int',value:'izOpen',text:'是否启用（0否停用，1是启用）',dictCode:''})
      fieldList.push({type:'int',value:'izDelete',text:'是否删除（0否 1是已删除）',dictCode:''})
      fieldList.push({type:'string',value:'tenantId',text:'学校编码',dictCode:''})
      fieldList.push({type:'date',value:'createTime',text:'创建时间'})
      fieldList.push({type:'string',value:'createUser',text:'创建人',dictCode:''})
      fieldList.push({type:'date',value:'editTime',text:'编辑时间'})
      fieldList.push({type:'string',value:'editUser',text:'编辑人',dictCode:''})
      this.superFieldList = fieldList
    },
    //调课

  }
}
</script>
<style scoped>
.week-t {
  background-color: #d0d0d0;
  height: 40px;
  border-right: 1px solid #e2e2e2;
  color: #151515;
  line-height: 40px;
  font-weight: bold;
}
.week-c {
  height: 53px;
  border: 1.5px solid #e2e2e2;
  line-height: 17px;
  font-size: 12px;
}
.week-c:hover {
  background-color: #e2e1e1;
}
@import '~@assets/less/common.less';
</style>